<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/animate.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body class="subject" id="pullrefresh">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">专题</h1>
		</header>

		<div class="mui-content">

			<!--商品列表-->
			<div id="listview" style="padding-bottom: 100px;">

			</div>

		</div>

		<!--返回顶部-->

		<span class="totop hide mui-icon mui-icon mui-icon-arrowup" id="totop" onclick="scrolltotop()"></span>

		<!--商品列表模板-->
		<!--商品列表模板-->
		<script type="text/html" id='goodsTpl'>
			{{each goodslist item idx}}
			<div class="card-wrap" onclick="goodsTap({{idx}})">
				<div class="pic-wrap">
					<img class="lazy" data-src="{{item.itempic}}" />
				</div>
				<div class="title-wrap">
					<img class="shoptype" src="{{item.shoptype==='B'?'../imgs/shoptype_b.png':'../imgs/shoptype_c.png'}}"></img>
					<span class="title ">{{item.itemtitle}}</span>
				</div>
				<div class="price-wrap">
					<div class="itemendprice">￥{{item.itemendprice}}</div>
					<div class="itemquan">{{item.couponmoney}}元券</div>
					<div class="itemsale">销量{{item.itemsale}}</div>
					<!--<div class="btn">
						<img class="icon" src="../imgs/share.png" />
						分享</div>-->
					<div class="btn">
						<img class="icon" src="../imgs/shandian.png" />
						<span>领券</span>
					</div>
				</div>
			</div>
			{{/each}}
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script type="text/javascript" src="../js/api.js"></script>
		<script type="text/javascript" src="../js/zepto113.js"></script>
		<script type="text/javascript" src="../js/lazyload.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#FE413F', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '50px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							mui('#pullrefresh').pullRefresh().endPulldown();
						}
					}
				},
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				$("h1.mui-title").html(self.title)
				getGoods(self.sid);
			})

			//商品列表
			var goodslist = []

			function getGoods(sid) {
				api.getSubjectGoods(sid, function(res) {
					if (res.code == 1) {

						var list = res['data']
						//仅用于缓存(点击跳转详情)
						goodslist = list

						var html = template('goodsTpl', {
							goodslist: list
						})

						$('#listview').html(html)

						myLazyLoad.update()
					}
				})
			}

			function goodsTap(idx) {
				if (goodslist[idx] && window.plus) {
					mui.openWindow({
						url: 'detail.html',
						id: 'detail',

						styles: {
							popGesture: "close"
						},
						extras: {
							goods: goodslist[idx]
						}
					})
				} else {
					plus.nativeUI.alert('出错了')
				}

			}

			//返回顶部

			function totopIn() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('hide')
				totopview.classList.add('fadeInUp', 'animated')
				totopview.addEventListener('animationend', totopInCallBack)
			};

			function totopInCallBack() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('fadeOutDown', 'animated')
				totopview.removeEventListener('animationend', totopInCallBack)
			}

			function totopOut() {
				var totopview = document.getElementById("totop")
				totopview.classList.add('fadeOutDown', 'animated')
				totopview.addEventListener('animationend', totopOutCallBack)
			};

			function totopOutCallBack() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('fadeOutDown', 'animated')
				totopview.classList.add('hide')
				totopview.removeEventListener('animationend', totopOutCallBack)
			}

			var totop = false;
			var scrollTop = 0;
			window.onscroll = function() {
				scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 1500 && !totop) {
					totop = true;
					totopIn()
				} else if (scrollTop < 500 && totop) {
					totop = false;
					totopOut()
				}
			}

			function scrolltotop() {
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				})
			}

			//图片懒加载器
			var myLazyLoad = new LazyLoad({
				elements_selector: ".lazy"
			});
		</script>
	</body>

</html>
